<!--
 * @Author: wangzhichiao<https://github.com/wzc570738205>
 * @Date: 2020-05-25 14:58:08
 * @LastEditors: wangzhichiao<https://github.com/wzc570738205>
 * @LastEditTime: 2020-05-26 15:39:40
 -->
<template>
  <el-dialog
    title="表单设计"
    fullscreen
    :visible="visible"
    :append-to-body="true"
    :show-close="false"
    @close="handleDialogClose"
  >
    <FormMark
      v-if="visible"
      :formMaking="formMaking"
      @handleDialogClose="handleDialogClose"
      @handleFormDesignSave="handleFormDesignSave"
    />
<!--     <span slot="footer" class="dialog-footer">
      <el-button
        type="text"
        size="medium"
        icon="el-icon-document-checked"
        @click="handleFormDesignSave"
        >保存</el-button
      >
      <el-button
        class="close"
        type="text"
        size="medium"
        icon="el-icon-close"
        @click="handleDialogClose"
        >关闭</el-button
      >
    </span> -->
  </el-dialog>
</template>

<script>
//  import FormDesignService from '../../../../service/form_design'
import FormMark from '../../../../components/FormMark/FormMark'

export default {
  components: {
    FormMark
  },
  props: {
    show: {
      type: Boolean,
      required: true,
      default: () => false
    },
    data: {
      type: Object,
      required: true,
      default: () => {}
    }
  },
  data() {
    return {
      visible: false,
      formMaking: {}
    }
  },
  methods: {
    // 处理Dialog关闭事件
    handleDialogClose() {
      this.$emit('update:show')
    },
    // 处理表单设计保存
    handleFormDesignSave(data) {
      console.log(this.data)
      console.log(data)
      this.data.formMaking = data
      this.$emit('formDesign', JSON.parse(JSON.stringify(this.data)))

      this.handleDialogClose()
      /*   const json = this.$refs.formMaking.getJSON()
      let form = JSON.parse(JSON.stringify(this.data))
      form.content = JSON.stringify(json)

      FormDesignService.updateForm(form).then(res => {
        this.$message.success('保存成功')
        this.$emit('success')
        this.handleDialogClose()
      }) */
    }
  },
  watch: {
    show(value) {
      /*     if (value) {
        this.$nextTick(() => {
          const content = this.data.content
          if (content) {
            const json = JSON.parse(content)
            this.$refs.formMaking.setJSON(json)
          } else {
            this.$refs.formMaking.handleClear()
          }
        })
      } */
      this.visible = value
    },
    data(value) {
      this.formMaking = JSON.parse(JSON.stringify(value))
      console.log(value)
      console.log(this.formMaking)
    }
  }
}
</script>

<style lang="stylus" scoped>
>>> .el-dialog__body
  padding 0
.form-making
  height calc(100vh - 55px)
  .close
    color red
</style>
